<template>
	<div class="teacherContainer">
		<div class="header">
			<div>
				<a-radio-group v-model:value="searchData.search_AND_EQ_startStatus" @change="(pagination.current = 1) & (projectList = []) & show()">
					<a-radio-button :value="-1">{{ t('control','全部') }}</a-radio-button>
					<a-radio-button :value="99">{{ t('control','申请中') }}</a-radio-button>
					<a-radio-button :value="1">{{ t('control','进行中') }}</a-radio-button>
					<a-radio-button :value="2">{{ t('control','已完成') }}</a-radio-button>
				</a-radio-group>
				<a-input-search
				allowClear
					v-model:value="searchData['search_AND_LIKE_projectName']"
					:placeholder="t('control','请输入项目名称')"
					style="width: 260px;margin-left: 20px;"
					@search="(pagination.current = 1) & show()"
				/>
			</div>
			<!-- <a-button type="primary" @click="handleClick({name: '新建项目'})">新建项目</a-button> -->
		</div>
		<div class="content">
			<div class="itemBox">
				<projectItem :hasOperate="false" class="item" v-for="(item, i) in projectList" :key="item.id" :item="item" @handleClick="handleClick" />
				<div class="item" v-if="projectList.length%3"  v-for="item in (3 - projectList.length%3)"></div>
				<a-empty  class="noData" v-if="!projectList.length">
					<template #description>{{t('common', '暂无数据')}}</template>
				</a-empty>
			</div>
			<a-pagination style="text-align: center;min-height: 50px;display: flex;align-items: center;justify-content: center;padding-bottom: 15px;" @change="show" v-model:current="pagination.current" show-size-changer :page-size-options="['9', '18', '36']"
			:total="pagination.totalElements" :pageSize="pagination.size" @showSizeChange="(current, size) => {pagination.size = size}" />
			
		</div>
		<a-modal :maskClosable="false" width="800px" v-model:open="modal.visible" :ok-button-props="{ disabled: modal.formDisable }" :footer="null">
			<addAndEditProject :loading="loading" v-model="formModel" :customUploadImage="customUploadImage" @handleSubmit="handleSubmit" @handleCancel="modal.visible = false" :disabled="modal.formDisable" />
		</a-modal>
	</div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { useRouter } from 'vue-router'
import projectItem from '@/components/items/projectItem.vue'
import { teacherProjectSave, teacherProjectOnline, teacherProjectOffline, teacherProjectDelete } from '@/request/teacher/project/development'
import { teacherLearningSave } from '@/request/learn/square'

import {collectProject,uncollectProject} from '@/request/projectSquare.js'

import addAndEditProject from '@/components/teacher/addAndEditProject.vue'
import { message, Modal } from 'ant-design-vue'
import { ossUpload } from '@/request/addAndEditProject'
import img from '@/assets/项目图片.jpg'

import { getJoinedProjectList,} from '@/request/personalCenter.js'
import { t } from '@/i18n'
const router = useRouter()
const projectList = ref([])
const searchData = ref({
	search_AND_EQ_startStatus: -1,
})
const pagination = ref({ totalElements: 0, current: 1, size: 9 })
const customUploadImage = async info => {
	let res = await ossUpload({
		file: info.file,
		dir: 'project',
	})
	if (res) return res.data
}
const show = async (page,pageSize) => {
	let req = {
		...pagination.value,
		page: pagination.value.current - 1,
		...searchData.value,
	}
	if (searchData.value.search_AND_EQ_startStatus == 99) {
		req['search_AND_IN_auditStatus'] = 0
		delete req['search_AND_EQ_startStatus']
	}
	let res = await getJoinedProjectList(req)
	if (!res) return
	projectList.value = [...res.data.content]
	pagination.value = {
		...pagination.value,
		...res.data.page
	}
}
show()

const formModel = ref({ projectJobDTOList: [{}] })
const modal = reactive({ visible: false, formDisable: false, name: '' })
const handleClick = async ({name, item}) => {
	console.log(name, '?')
	let req = {...item}
	let res = null
	let operate = null
	switch (name) {
		case '新建项目':
			formModel.value = {
				coverImg:img,
				projectJobDTOList: [{}]
			}
			modal.visible = true
			modal.formDisable = false
			modal.name = t('control','新建项目')
			break
		case 'item':
			router.push({
				name: 'studentProcess',
				query: {
					id: item?.id,
					name: item?.name,
					template: item?.projectTemplate,
				}
			})
			break
		case '取消收藏':
			res = await uncollectProject(req.id)
			if (!res) return
			message.success(t('projectCard','操作成功'))
			show()
			break
		case '收藏':
			res = await collectProject(req.id)
			if (!res) return
			message.success(t('projectCard','操作成功'))
			show()
			break
		case '上线':
			res = await teacherProjectOnline(req)
			if (!res) return
			message.success(t('projectCard','操作成功'))
			show()
			break
		case '下线':
			res = await teacherProjectOffline(req)
			if (!res) return
			message.success(t('projectCard','操作成功'))
			show()
			break
		case '删除项目':
			operate = await new Promise((resolve, reject) => {
				Modal.confirm({
					content: t('control','是否确认删除'),
					onOk() {
						resolve(true);
					},
					confirmText: t('common','确定'),
					cancelText: t('common','取消'),
					onCancel() {
						resolve(false);
					},
				})
			})
			if (!operate) return
			res = await teacherProjectDelete([req.id])
			if (!res) return
			message.success(t('projectCard','操作成功'))
			show()
			break
	}
}
const loading = ref(false)
const handleSubmit = async val => {
	let req = {
		...val,
		course: val?.course.join(),
    gradeClass: val?.gradeClass.join(),
	coverImg:val&&val.coverImg==img?'project/system/default_ cover.jpg':val.coverImg,
	}
	loading.value = true
	let res = await teacherProjectSave(req)
	loading.value = false
	if (!res) return
	modal.visible = false
	message.success(t('control',"保存成功"))
	show()
}
</script>

<style lang="scss" scoped>
*{ 
	min-height: 0;
}
	.teacherContainer {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: white;
			border-radius: 10px;
			height: 80px;
			padding: 20px;
		}
		.content {
			min-height: 0;
			margin-top: 20px;
			overflow-y: auto;
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			/* flex-wrap: wrap; */
			background: white;
			border-radius: 10px;
			.itemBox {
				min-height: 0;
				overflow-y: auto;
				overflow-x: hidden;
				flex-grow: 1;
				width: 100%;
				padding: 15px 15px 0 15px;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: flex-start;
				position: relative;
				.item {
					width: 32.6%;
					margin-bottom: 15px;
				}
			}
		}
	}
</style>